<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input class="filter-item" placeholder="商户简称" v-model="params.appAuthToken" style="width: 150px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.source" filterable placeholder="店铺类型" style="width: 120px;" clearable>
        <el-option label="京东自助" value="10"></el-option>
        <el-option label="微信赠机" value="20"></el-option>
        <el-option label="小屏自助" value="30"></el-option>
        <el-option label="扫枪" value="40"></el-option>
        <el-option label="到家小程序" value="50"></el-option>
        <el-option label="双屏自助" value="60"></el-option>
        <el-option label="彩娱自助" value="70"></el-option>
      </el-select>
      <el-select class="filter-item" v-model="params.id" filterable placeholder="店铺" clearable>
          <el-option v-for="(shopList,index) in shopListAll" :key="index" :value="shopList.id" :label="shopList.name"></el-option>
      </el-select>
      <el-select class="filter-item" v-model="params.erpSysId" filterable placeholder="ERP系统" style="width: 100px;" clearable>
          <el-option v-for="(item,index) in erpsListAll" :key="index" :value="item.id" :label="item.name"></el-option>
      </el-select>
      <el-select class="filter-item" v-model="params.status" filterable placeholder="启用状态" style="width: 120px;" clearable>
          <el-option value="10" label="启用"></el-option>
          <el-option value="20" label="停用"></el-option>
      </el-select>
      <el-input class="filter-item" placeholder="SN号" v-model="params.deviceNo" style="width: 150px;" clearable></el-input>
      <el-input v-if="companyType!='hulu'" class="filter-item" placeholder="门店ID" v-model="params.id" style="width: 210px;" clearable></el-input>
      <el-input v-if="companyType!='hulu'" class="filter-item" placeholder="商户编号" v-model="params.shopNo" style="width: 150px;" clearable></el-input>
      <el-input v-if="companyType=='hulu'" class="filter-item" placeholder="商户编号" v-model="params.mchId" style="width: 150px;" clearable></el-input>
      <el-select class="filter-item" v-model="params.dockType" filterable placeholder="对接类型" style="width: 120px;" clearable>
          <el-option value="10" label="大中台"></el-option>
          <el-option value="20" label="小中台"></el-option>
          <el-option value="30" label="无需对接"></el-option>
      </el-select>
      <el-button class="filter-item" type="primary" icon="el-icon-edit-outline" @click="getShopList(1)">搜索</el-button>
      <el-button v-if="btnPower.ShopListAdd" class="filter-item" type="primary" icon="el-icon-plus"  @click="getButton">添加</el-button>
    </div>
    <el-table
      :data="shopLists"
      v-loading="listLoading"
      element-loading-text="请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column
        prop="id"
        label="店铺ID"
        width="180px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="店铺名称"
        width="180px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="erpSysId"
        :formatter="showErpSys"
        label="系统名称"
        width="100px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="shopNo"
        label="商户编号"
        width="120px"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="mchId"
        label="商户编号"
        width="120px"
        v-if="companyType=='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="appAuthToken"
        label="商户简称"
        width="120px"
        align="center">
      </el-table-column>
      <el-table-column
        prop="amtRoundRule"
        :formatter="showAmtRoundRule"
        label="四舍五入"
        width="90"
        align="center">
      </el-table-column>
      <el-table-column
        prop="status"
        :formatter="showStatus"
        label="状态"
        width="60"
        align="center">
      </el-table-column>
      <el-table-column
        prop="createAt"
        :formatter="timeFormat"
        label="创建时间"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="modAt"
        :formatter="timeFormat"
        label="修改时间"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="source"
        :formatter="showSource"
        label="店铺类型"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="dockType"
        :formatter="showDockType"
        label="对接类型"
        width="80"
        align="center">
      </el-table-column>
      <el-table-column
        prop="longitude"
        label="经度"
        width="80"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="latitude"
        label="纬度"
        width="80"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="provCd"
        label="省"
        width="80"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="cityCd"
        label="市"
        width="80"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="distCd"
        label="区"
        width="80"
        v-if="companyType!='hulu'"
        align="center">
      </el-table-column>
      <el-table-column
        prop="address"
        label="详细地址"
        width="200"
        align="center">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="180"
        align="center">
        <template slot-scope="scope" align="center">
          <el-button v-if="btnPower.ShopSet&&companyType!='hulu'" type="success" size="small" @click="getUrl('set',scope.row)" >设置</el-button>
          <el-button v-if="btnPower.ShopConfig" type="danger" size="small" @click="getUrl('config',scope.row)" >配置</el-button>

          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('edit',scope.row)">店铺信息</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('device',scope.row)">设备</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('integralrule',scope.row)">积分</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('ticket',scope.row)">小票</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('bag',scope.row)">购物袋</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('prod',scope.row)">无码商品</el-button>
          <el-button v-if="companyType=='hulu'" type="text" size="small" @click="getShopSet('banner',scope.row)">广告</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="params.current" :limit.sync="params.size" @pagination="getShopList" />
    <el-dialog
      title="填写商户编号"
      :visible.sync="popup"
      :close-on-click-modal=false
      :destroy-on-close=true
      width="500px"
      center>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="商户编号" prop="merchantNo" ref="merchantNo">
            <el-input placeholder="请输入商户编号" v-model="ruleForm.merchantNo"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="popup = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { shopList, erpsysBaseAll, shopBaseAll, posmerchantList } from '@/api/api.verify.js'
import commin from "@/utils/commin.js"

export default {
  components:{Pagination},
  name: 'ShopList',
  data() {
    return {
      btnPower:JSON.parse(localStorage.getItem('btnList')),//按钮权限
      companyType:commin.getDomain(),//判断域名
      listLoading: true,
      shopLists: [],//店铺列表
      shopListAll: [],//店铺所有列表
      erpsListAll: [],//erp所有列表
      total:0,//总条数
      params:{
        current: 1,
        size: 10,
        id: null,//店铺ID
        status:"10",//启用状态
        deviceNo:null,//sn号
        source:null,//店铺类型
        dockType:null,//对接类型
        shopNo:null,//商户号
        mchId:null,//葫芦商户号
        appAuthToken:null,//商户简称
      },//查询条件
      popup:false,//弹窗状态
      ruleForm:{
        merchantNo:null
      },
      rules:{
        merchantNo:[
            {required: true, message: '请输入商户编号', trigger: 'blur'},
        ],
      }
    }
  },
  created() {
    this.getStart()
  },
  methods: {
    getStart(){//初始化
      this.getErpsListAll();
      this.getShopListAll();
      this.getShopList();
    },
    getShopList(e){//获取店铺列表
      if(e==1){this.params.current=1}
      let _this=this
      let data=this.params
      this.listLoading = true
      shopList(data).then(d=>{
        _this.shopLists = d.data.records;
        _this.total = parseInt(d.data.total);
      }).finally(d=>{
        _this.listLoading = false
      });
    },
    getErpsListAll() {//获取erp下拉内容
      let _this = this;
      let data={};
      data.status=10;
      erpsysBaseAll(data).then(d=>{
        _this.erpsListAll = d.data;
      });
    },
    getShopListAll() {//获取店铺下拉内容
      let _this = this;
      let data={};
      data.marketId=this.params.marketId;
      shopBaseAll(data).then(d=>{
        _this.params.id = "";
        _this.shopListAll = d.data;
      });
    },
    getUrl(e,d){//跳转页面
      let name
      let query={}
      switch(e){
        case 'set'://设置
          name="/shopSet"
          break;
        case 'config'://配置
          name="/shopConfig"
          break;
      }
      if(e!="add"){
        query={shopId:d.id,shopName:d.name,shopNo:d.shopNo,level:d.level,marketId:d.marketId }
      }
      let route=this.$router.resolve({path:name, query:query  })
      window.open(route.href, '_blank')
    },
    getShopSet(e,d){//跳转详细设置
      let data={}
      data.shopId=d.id
      data.shopName=d.name
      data.shopNo=d.shopNo
      data.level=d.level
      data.marketId=d.marketId
      data.name=e
      let route=this.$router.resolve({path:"/shopSet", query:data  })
      window.open(route.href, '_blank')
    },
    getButton(){
      this.ruleForm.merchantNo=null;
      this.popup = true;
    },
    submitForm(formName){//表单验证
      let _this = this;
      this.$refs[formName].validate((valid,object) => {
        if(valid) {
          _this.getAddForm()
        }else{
          for (const i in object) {
            let dom = this.$refs[i]
            // 这里是针对遍历的情况（多个输入框），取值为数组
            if (Object.prototype.toString.call(dom) !== '[object Object]') { 
              dom = dom[0]
            }
              // 第一种方法（包含动画效果）
              dom.$el.scrollIntoView({ // 滚动到指定节点
              // 值有start,center,end，nearest，当前显示在视图区域中间
              block: 'center', 
              // 值有auto、instant,smooth，缓动动画（当前是慢速的）
              behavior: 'smooth' 
            });
            break // 跳出循环了
          }
        }
      });
    },
    getAddForm(){//接口验证葫芦商户编号
      let _this = this
      let data={}
      data.merchantCatagory=this.ruleForm.merchantNo
      posmerchantList(data).then(d=>{
        if(d.data.records.length>0){
          _this.getAddShop()
        }else{
          _this.$message({
            message: "无此商户编号",
            type: 'error',
            duration: 2000
          });
        }
      })
    },
    getAddShop(){//跳转页面
      let query=this.ruleForm
      let route=this.$router.resolve({path:"/shopForm", query:query  })
      window.open(route.href, '_blank')
    },


    showErpSys(row, column, cellValue, index) {//系统名称
      let data=this.erpsListAll.find(t=> t.id==cellValue)
      if(data){
        return data.name
      }else{return cellValue}
    },
    showStatus(row, column, cellValue, index) {
      return cellValue == "10" ? "启用" : "停用";
    },
    showAmtRoundRule(row, column, cellValue, index) {
      var tip = "无";
      if (cellValue == 20) {
        tip = "商品";
      } else if (cellValue == 30) {
        tip = "订单";
      }
      return tip;
    },
    showSource(row, column, cellValue, index){
      if(cellValue){
        let sources=cellValue.split(",")
        let array=[]
        for(let i=0;i<sources.length;i++){
          array.push(this.getShowSource(sources[i]))
        }
        return array.join(",")
      }
    },
    getShowSource(cellValue){
      switch(Number(cellValue)){
        case 10:
         return '京东自助'
        case 20:
         return '微信赠机'
        case 30:
         return '小屏自助'
        case 40:
         return '扫枪'
        case 50:
         return '到家小程序'
        case 60:
         return '双屏自助'
        case 70:
         return '彩娱自助'
      }
    },
    showDockType(row, column, cellValue, index){
      switch(Number(cellValue)){
        case 10:
         return '大中台'
        case 20:
         return '小中台'
        case 30:
         return '无需对接'
      }
    },
    timeFormat(row, column, cellValue, index) {
      return this.common.getLocalTime(parseInt(cellValue) * 1000);
    },
  }
}
</script>

